<template>
	<view class="home-content">
		<view class="custom-navigation">
			<!-- 自定义导航内容 -->
			小春运动
		</view>
		<view class="top-box">
			<view class="top-ban">
				<!-- <image src="../../static/images/home/banner-bg.png" class="image"></image> -->
				<image src="../../static/images/home/banner-bg1.png" class="image"></image>
			</view>

			<view class="charge-list" v-if="rechargeList.length>0">
				<view class="charge-list-item" v-for="(item,index) in rechargeList" :key="index"
					@click="userRecharge(index)">
					<view class="new" v-if="item === 1">新人</view>
					<view class="t0">充{{item.money}}</view>
					<view class="t1">{{item.memo}}</view>
					<button class="btn">
						充值
						<image src="../../static/images/home/icon-arrow-r.png" class="image"></image>
					</button>
				</view>
			</view>
			<view class="slog-list" v-if="rechargeList.length>0">
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-jine.png" class="img"></image>
					<text class="text">多充多送</text>
				</view>
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-money.png" class="img"></image>
					<text class="text">消费抵用</text>
				</view>
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-store.png" class="img"></image>
					<text class="text">全国门店均可用</text>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="wx-block">
				<view class="left">
					<image src="../../static/images/home/smcode.png" class="img"></image>
					<view class="left-info">
						<view class="t0">微信扫一扫</view>
						<view class="t1">扫码开启，开心玩乐</view>
					</view>
				</view>
				<view class="right" @click="openScanCode">
					<view class="right-btn">点击扫码</view>
					<image src="../../static/images/home/back-arrow.png" class="arrow"></image>
				</view>
			</view>
			<view class="outlets" @click="outlets">
				<image src="../../static/images/home/outlets.png" class="image"></image>
				<view>附近网点</view>
			</view>
		</view>
		<uni-popup ref="rechargePopup" type="center" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="recharge-popup-box">
				<image src="../../static/images/home/recharge.png" class="image"></image>
				<view class="money-box">
					<view class="money">充{{rechargeDetail.money}}元</view>
					<view class="gifts">实{{rechargeDetail.memo}}元</view>
				</view>
				<view class="button-group">
					<view class="button button1" @click="cancelRecharge">我再想想</view>
					<view class="button button2" @click="rechargePay">立即支付</view>
				</view>
				<view class="agree-tit">
					点击支付既表示同意<text @click="this.showRechargeAgree = true"
						class="text">《充值协议》</text>，知悉本次充值本金和返现余额不可提现转移。
				</view>
			</view>
		</uni-popup>
		<view class="agree-dialog" v-if="showRechargeAgree">
			<view class="agree-box">
				<view class="t0">
					《小春运动充值协议》
					<view class="close" @click="this.showRechargeAgree = false">
						<image src="../../static/images/home/close.png" class="image"></image>
					</view>
				</view>
				<view class="content">
					<view class="t1">
						一、协议内容
						<br />
						用户在小春运动平台上参与充值活动，即可获得相应比例的余额，并体现在该用户的小春运动账户上(目前充值金额:余额=1:1)。若有进行充返活动，将额外获得对应返还比例的余额或者其他物品(具体以活动规则为准)。
						<br />
						温馨提示:
						<br />
						充值活动得到的余额仅限在小春运动进行消费(请用微信直接扫码付费使用)，不支持购买卡券等活动产品，建议您根据实际需求进行充值。
						<br />
						二、充值余额有效期
						<br />
						充值所获得的账户余额有效期为自充值日起至用完即止。
						<br />
						三、充值余额使用规则
						<br />
						充值余额仅可用于支付本人在小春运动订单中的费用，不支持购买卡券等活动产品，不可提现、转赠退款。
						<br />
						四、特别声明
						<br />
						1.凡通过活动获取的余额与卡、券仅限与账户绑定的微信或支付宝用户使用。不能提供给第三方机构或个人使用、亦不能代他人扫码使用。
						2.充返活动福利仅提供给正当、合法使用小春运动客户的充值费用。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				rechargeList: [],
				device_id: null,
				date: null,
				active_type: null,
				showRechargeAgree: false,
				rechargeDetail: null,
			};
		},
		onLoad(options) {
			if (options && options.type) {
				this.active_type = options.type
			}
			if (options && options.date) {
				this.date = options.date
			}
			let token = uni.getStorageSync("token")
			if (!token) {
				this.wxAuthorize()
			} else {
				this.getUserInfo()
				this.getRechargeConfig();
			}
		},
		methods: {
			cancelRecharge() {
				this.$refs.rechargePopup.close()
			},
			rechargePay() {
				let that = this
				api.submit({
					id: this.rechargeDetail.id
				}).then(res => {
					if (res.code) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(payres) {
								that.showToast("支付成功")
								setTimeout(() => {
									that.getUserInfo()
								}, 1000)
							},
							fail: function(err) {
								that.showToast("用户取消支付")
							}
						});
					} else {
						that.showToast(res.msg)
					}
				});
			},
			userRecharge(index) {
				this.rechargeDetail = this.rechargeList[index]
				this.$refs.rechargePopup.open('center')
			},
			wxAuthorize() {
				let that = this
				uni.showLoading({
					mask: true,
					title: "登录中,请稍后"
				})
				uni.login({
					provider: 'weixin',
					success: login => {
						api.otherLogin({
							code: login.code
						}).then(wx => {
							uni.getUserInfo({
								provider: "weixin",
								success: info => {
									api.getWxUserInfo({
										openid: wx.data.openid,
										sessionKey: wx.data.session_key,
										encryptedData: info.encryptedData,
										iv: info.iv
									}).then(wxUser => {
										that.showToast("登录成功")
										uni.hideLoading()
										that.$store.commit('saveToken', wxUser.data
											.token)
										that.getUserInfo()
										that.getRechargeConfig();
									}).catch(error => {
										that.showToast("登录失败")
										uni.hideLoading()
									})
								}
							})
						})
					},
					fail() {
						that.showToast("登录失败")
						uni.hideLoading()
					}
				})
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					if (res.code == 401) {
						uni.removeStorageSync('token')
						this.wxAuthorize()
					} else {
						this.userInfo = res.data.userinfo
						this.$store.commit('saveUserInfo', res.data.userinfo)

						if (this.active_type == 'group') {
							uni.navigateTo({
								url: '/pages/active/groupActive'
							})
						}
						if (this.active_type == 'seckill' && this.date) {
							uni.navigateTo({
								url: '/pages/active/limitActive?date=' + this.date
							})
						}
					}
				})
			},
			getQueryParam(url, param) {
				const queryString = url.split('?')[1];
				if (!queryString) return null;
				const params = queryString.split('&');
				for (let i = 0; i < params.length; i++) {
					const [key, value] = params[i].split('=');
					if (decodeURIComponent(key) === param) {
						return decodeURIComponent(value);
					}
				}
				return null;
			},
			// 扫码授权
			openScanCode() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: 'qrCode',
					success: res => {
						that.device_id = that.getQueryParam(res.result, 'sn')
						that.active_type = that.getQueryParam(res.result, 'type')
						that.getDeviceInfo()
					},
					fail: () => {
						that.showToast('用户取消扫码')
					}
				})
			},
			getDeviceInfo() {
				// 获取设备码
				api.getDeviceInfo({
					id: this.device_id
				}).then(res => {
					if (!res.data) {
						this.showToast('未查询到该设备请联系客服')
					} else {
						// if (res.data.type != 'online') {
						// 	return this.showToast('设备已下线')
						// }
						// if (res.data.status == 'hidden') {
						// 	return this.showToast('设备已禁用')
						// }
						if (this.active_type) {
							uni.navigateTo({
								url: "/pages/device/index?sn=" + this.device_id + '&type=' + this
									.active_type
							})
						} else {
							uni.navigateTo({
								url: "/pages/device/index?sn=" + this.device_id
							})
						}

					}
				})
			},
			showToast(title) {
				uni.showToast({
					icon: "none",
					title: title
				})
			},
			checkLocationService() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						success: () => resolve(true), // 定位服务已开启
						fail: () => {
							uni.getSetting({
								success(res) {
									if (!res.authSetting['scope.userLocation']) {
										uni.authorize({
											scope: 'scope.userLocation',
											success() {
												// 用户已授权
												uni.getLocation({
													success: () => resolve(
														true),
													fail: () => reject(
														'定位服务未开启，且应用没有获得权限'
														)
												});
											},
											fail() {
												reject('用户拒绝了授权,请在设置中打开');
											}
										});
									} else {
										reject('定位服务未开启');
									}
								},
								fail: () => reject('定位失败'),
							});
						},
					});
				});
			},
			outlets() {
				this.checkLocationService().then(() => {
					uni.navigateTo({
						url: "/pages/ground/groundMap"
					});
				}).catch(error => {
					console.log(error)
					uni.showToast({
						icon: "none",
						title: error
					})
				});
			},
			goTocharge(index) {
				uni.navigateTo({
					url: '/pages/user/recharge?index=' + index // 跳转到对应路径的页面
				});
			},
			getRechargeConfig() {
				api.rechargeConfig().then(res => {
					this.rechargeList = res.data;
				});
			},
		}
	};
</script>

<style lang="scss">
	.home-content {
		padding: 88rpx 0rpx 20rpx;
		background: url('https://oss.bigchun.com/img/home/header-bg.png') no-repeat;
		background-size: 100% 328rpx;

		.custom-navigation {
			text-align: center;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			color: #ffffff;
		}
		.recharge-popup-box {
			position: relative;
			background-color: #ffffff;
			width: 664rpx;
			height: 494rpx;
			background: #FFFFFF;
			text-align: center;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		
			.image {
				width: 396rpx;
				height: 286rpx;
				margin-top: -216rpx;
			}
		
			.money-box {
				color: #333333;
				margin: 42rpx 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 55rpx;
				color: #333333;
		
				.gifts {
					color: #FF4D00;
				}
			}
		
			.button-group {
				margin: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.button {
					width: 278rpx;
					height: 86rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 86rpx;
					border-radius: 43rpx 43rpx 43rpx 43rpx;
				}
		
				.button1 {
					color: #3A9DFE;
					border: 4rpx solid #3C9DFE;
				}
		
				.button2 {
					color: #ffffff;
					background: linear-gradient(90deg, #389CFE 0%, #8AA2F8 100%);
				}
			}
		
			.agree-tit {
				margin: 18rpx 40rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: left;
		
				.text {
					color: #49a1fd;
				}
			}
		}
		
		.agree-dialog {
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 200;
		
			.agree-box {
				background: url('https://oss.bigchun.com/img/home/agree-bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 30rpx;
				margin: 30% 40rpx;
				height: 800rpx;
				overflow-y: scroll;
		
				.t0 {
					font-size: 34rpx;
					color: #000000;
					line-height: 48rpx;
					text-align: center;
					position: relative;
		
					.close {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;
		
						.image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
			}
		
			.t1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #444444;
				line-height: 50rpx;
				text-align: left;
			}
		}

		.top-box {
			padding: 26rpx;
			margin: 32rpx 30rpx 0;
			background: #ffffff;
			box-shadow: 0px 0px 12rpx 0px rgba(102, 226, 244, 0.19);
			border-radius: 20rpx;

			.top-ban {
				.image {
					width: 100%;
					height: 148rpx;
				}
			}

			.charge-list {
				display: flex;
				margin-top: 16rpx;

				.charge-list-item {
					flex: 1;
					margin-right: 24rpx;
					background: #49a1fd;
					border-radius: 20rpx;
					text-align: center;
					padding: 26rpx 0;
					position: relative;

					&:last-child {
						margin-right: 0;
					}

					.new {
						background: url('https://oss.bigchun.com/img/home/new-bg.png') no-repeat;
						background-size: 110rpx 40rpx;
						position: absolute;
						right: 0;
						top: -5px;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						line-height: 34rpx;
						width: 110rpx;
						height: 40rpx;
					}

					.t0 {
						font-weight: 400;
						font-size: 30rpx;
						color: #ffffff;
						line-height: 42rpx;
					}

					.t1 {
						font-size: 40rpx;
						color: #ffffff;
						line-height: 56rpx;
						margin-bottom: 4rpx;
					}

					.btn {
						background: #ffffff;
						border-radius: 24rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #49a1fd;
						line-height: 40rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;

						.image {
							width: 12rpx;
							height: 22rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			.slog-list {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.slog-list-item {
					display: flex;
					align-items: center;

					.img {
						width: 38rpx;
						height: 38rpx;
						margin-right: 4rpx;
					}

					.text {
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: left;
					}
				}
			}
		}

		.container {
			margin: 0 30rpx;

			.wx-block {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.img {
						width: 60rpx;
						height: 60rpx;
					}

					.left-info {
						margin-left: 10rpx;

						.t0 {
							font-size: 32rpx;
							color: #000000;
							line-height: 44rpx;
						}

						.t1 {
							font-weight: 400;
							font-size: 24rpx;
							color: #bdbdbd;
							line-height: 34rpx;
						}
					}
				}

				.right {
					width: 248rpx;
					height: 88rpx;
					background: linear-gradient(311deg, #93A4FB 0%, #2F9AFE 100%);
					box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
					border-radius: 44rpx;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;

					.arrow {
						width: 14rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}

				}
			}

			.outlets {
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				padding: 26rpx 20rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
				background-color: #ffffff;

				.image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.recharge-box {
				padding: 10rpx;
				background: #FFF3DD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.recharge-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 10rpx;
				}

				.recharge-list {
					display: flex;
					justify-content: space-between;

					.recharge-info {
						position: relative;
						z-index: 10;
						width: 100%;
						height: 100%;
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.label {
							font-size: 28rpx;
							color: #666666;
						}

						.value {
							font-size: 32rpx;
							color: #333333;
						}
					}

					.recharge-left {
						position: relative;
						width: 312rpx;
						height: 321rpx;
						background: #F9F9F9;
						border-radius: 12rpx 12rpx 12rpx 12rpx;

						.image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
						}
					}

					.recharge-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.recharge-item {
							position: relative;
							width: 322rpx;
							height: 157rpx;
							background: #F9F9F9;
							border-radius: 12rpx 12rpx 12rpx 12rpx;

							.image {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
							}
						}
					}
				}
			}
		}
	}
</style>